<template>
  <div
    data-h-cxk-qyg
    class="container-yg-quick"
  >
    <div
      data-h-cxk-qyg
      class="head-news"
    >
      <h4
        data-h-cxk-qyg
        class="news-title"
      >热门预告片</h4>
      <ul
        data-h-cxk-qyg
        class="news-list"
      >
        <li
          data-h-cxk-qyg
          class="li-first"
        >
          <i data-h-cxk-qyg>1</i>
          <img
            data-h-cxk-qyg
            src="@/../public/hotspot/yugao/7.jpg"
            alt=""
          >
          <p data-h-cxk-qyg>
            《星际穿越》《星际穿越》发布“太空羁旅”版预告，浩瀚星宇见证爱的力量！
          </p>
        </li>
        <li
          data-h-cxk-qyg
          class="li-first"
        >
          <i data-h-cxk-qyg>2</i>
          <img
            data-h-cxk-qyg
            src="@/../public/hotspot/yugao/8.jpg"
            alt=""
          >
          <p data-h-cxk-qyg>
            《1917》奥斯卡佳片《1917》今日上映，“希望”版预告坚守和平与爱
          </p>
        </li>
        <li
          data-h-cxk-qyg
          class="li-first"
        >
          <i data-h-cxk-qyg>3</i>
          <img
            data-h-cxk-qyg
            src="@/../public/hotspot/yugao/9.jpg"
            alt=""
          >
          <p data-h-cxk-qyg>
            《误杀》发布“耍大牌的雨”小特辑，片场趣事大放送
          </p>
        </li>
        <li
          data-h-cxk-qyg
          class="li-first"
        >
          <i data-h-cxk-qyg>4</i>
          <img
            data-h-cxk-qyg
            src="@/../public/hotspot/yugao/10.jpg"
            alt=""
          >
          <p data-h-cxk-qyg>
            《多力特的奇幻冒险》《多力特的奇幻冒险》7月24日上映，唐尼邀你共赴秘境
          </p>
        </li>
        <li
          data-h-cxk-qyg
          class="li-first"
        >
          <i data-h-cxk-qyg>5</i>
          <img
            data-h-cxk-qyg
            src="@/../public/hotspot/yugao/11.jpg"
            alt=""
          >
          <p data-h-cxk-qyg>
            《我在时间尽头等你》电影《我在时间尽头等你》预售火热开启 杨宗纬催泪献唱主题曲
          </p>
          <div
            data-h-cxk-qyg
            class="play"
          ></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less">
.container-yg-quick[data-h-cxk-qyg] {
  width: 360px;
  height: 486px;
  margin-left: 90px;
  float: right;
  background-color: rgb(255, 255, 255);
  .head-news[data-h-cxk-qyg] {
    margin-top: 0px;
    margin-bottom: 20px;
    color: #2d98f3;
    h4[data-h-cxk-qyg] {
      margin-top: 0px;
    }
    .news-title [data-h-cxk-qyg] {
      font-size: 26px;
      font-weight: 400;
      font-family: "Microsoft";
      line-height: 26px;
    }
  }
  .news-list[data-h-cxk-qyg] {
    // margin-top: -10px;
    width: 360px;
    height: 438px;
    padding: 0px;
    color: #333;
    li[data-h-cxk-qyg] {
      list-style: none;
      width: 360px;
      padding: 25px 0px;
      font-size: 14px;
      position: relative;
      i[data-h-cxk-qyg] {
        width: 20px;
        height: 20px;
        position: absolute;
        bottom: 29px;
        color: #fff;
        text-align: center;
        background-color: orange;
      }
    }
    .li-first[data-h-cxk-qyg] {
      padding-top: 0px;
    }
    p[data-h-cxk-qyg] {
      width: 224px;
      float: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    p:hover[data-h-cxk-qyg] {
      color: #ef4238;
    }
  }
}
</style>